<template>
<div>
  <div class="wrap wrapper">
    <div class="item" v-for="item in pictuers">
      <img :src="'https://pic.touxiangge.com/' + item.path +'/' + item.filename" />
      <div class="cover">
        <md-icon class="text-white">thumb_up</md-icon>{{item.view}}
      </div>
    </div>
    <infinite-loading @infinite="loadPictuers"></infinite-loading>
  </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Index',
  created() {
    // this.loadPictuers()
  },
  data() {
    return {
      pictuers: [],
      load: false,
      page: 1
    }
  },
  methods: {
    loadPictuers($state) {
      setTimeout(() => {
        this.load = true;
      if (this.page >= 30) $state.complete()
      let _this = this
      axios.get('http://txg.test/api/pictuers',{
        params: {
          page: this.page
        }
      }).then(({data}) => {
        if ((data.meta.pagination.total_pages - 1) > _this.page) {
          _this.page += 1
        } else {
          $state.complete()
        }
        if (data.data.length > 0) {
          _this.pictuers = _this.pictuers.concat(data.data);
          $state.loaded()
        } else {
          $state.complete()
        }
      })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 7rem 2rem 2rem 2rem;
  min-height: 100vh;
}
.md-icon.md-theme-default.md-icon-font.text-white {
  color: rgb(255, 255, 255);
  font-size: 1rem !important;
}
.item {
    display: flex;
    height: 200px;
    margin: 5px;
    flex-grow: 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    div {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1.5rem;
      background-color: rgba(0,0,0,.5);
      opacity: 0;
      bottom: -1.5rem;
      color: rgb(255, 255, 255);
      line-height: 1.5rem
    }
    &:hover {
      div {
        opacity: 1;
        transform: translateY(-1.5rem);
        transition: .3s;
      }
    }
}
  .item img {
    flex-grow: 1;
    height: 200px;
    object-fit: cover;
    transition: .3s;
  }
.wrap:after{
  display: block;
  content: '';
  flex-grow: 9999;
}
.wrap img:hover{

}
</style>
